<template>
  <div class="app-container">
    <div class="app-container__header">
      <el-tabs class="fun-tabs" v-model="headerTabName" @tab-click="onTabClick">
        <el-tab-pane label="书库" name="BookList"></el-tab-pane>
        <el-tab-pane label="草稿箱" name="DraftList"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="app-container__body is-has-header">
      <el-row class="search-box clearfix">
        <el-col :span="16">
          <el-input v-model="params.key" type="text" placeholder="搜索关键词" prefix-icon="el-icon-search" style="width:300px;" @keyup.enter.native="onSearch"></el-input>
          <el-button type="borderCyan" @click="onSearch">搜索</el-button>
        </el-col>
        <el-col :span="8" class="btns">
          <el-button @click="onExport" type="borderCyan">导出</el-button>
          <el-button icon="el-icon-edit-outline" type="borderCyan" @click="$router.push({name: 'BookDetail'})">新建书籍</el-button>
        </el-col>
      </el-row>
      <div class="gridtable-box">
        <el-table class="gridtable" :data="resp.bookList" @filter-change="filterChange">
          <el-table-column prop="cover" label="封面" align="center" width="70">
            <template slot-scope="scope">
              <img :src="scope.row.cover" class="book-cover" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" align="left" min-width="200">
            <template slot-scope="scope">
              <p class="book-tit">{{scope.row.title}}</p>
              <p class="book-info"><span>{{formatDate(scope.row.createAt)}}</span><span><i class="el-icon-view"></i> {{scope.row.pv}}</span></p>
            </template>
          </el-table-column>
          <el-table-column prop="qrcode" label="一扫即听" align="center">
            <template slot-scope="scope">
              <el-popover placement="bottom" width="170" trigger="click" v-if="baseUtil.isNotBlank(scope.row.qrcode)">
                <p style="text-align: center;font-weight: bolder;margin:0;">微信扫码听书</p>
                <p class="book-big-qrcode"><img :src="scope.row.qrcode" /></p>
                <img :src="scope.row.qrcode" class="book-qrcode" slot="reference" />
                <p style=" text-align: center; color: #37BCA0; margin: 0; cursor: pointer;"  @click="downLoadImg(scope.row.qrcode)">下载二维码</p>
              </el-popover>
              <p v-else> -- </p>
            </template>
          </el-table-column>
          <el-table-column prop="poster" label="专属海报" align="center">
            <template slot-scope="scope">
              <el-popover placement="bottom" width="235" trigger="click" v-if="baseUtil.isNotBlank(scope.row.poster)">
                <p style="text-align: center;font-weight: bolder;margin:0;">声意宝自动生动的海报</p>
                <p class="book-big-poster"><img :src="scope.row.poster" /></p>
                <img :src="scope.row.poster" class="book-poster" slot="reference" />
                <p style=" text-align: center; color: #37BCA0; margin: 0; cursor: pointer;" @click="downLoadImg(scope.row.poster)">下载海报</p>
              </el-popover>
              <p v-else> -- </p>
            </template>
          </el-table-column>
          <el-table-column prop="bookCategory.name" label="所在分区" align="center" min-width="150"
                           :filters="categoryFilters" column-key="categoryId"
                           :filter-method="handleFilter"></el-table-column>
          <el-table-column prop="status" label="状态"  align="center" column-key="status"
                           :filters="[{text:'已上架',value:1},{text:'未上架',value:0}]"
                           :filter-method="handleFilter">
            <template slot-scope="scope">
              <p v-if="scope.row.status == 1">已上架</p>
              <p v-else>未上架</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" class-name="opt-col">
            <template slot-scope="scope">
              <el-button type="text" @click="$router.push({name: 'BookDetail',query:{id:scope.row.id}})" size="mini"><i class="el-icon-edit"></i>修改</el-button>
              <span class="line">|</span>
              <disable :name="scope.row.status == 1?'下架':'上架'" :icon="scope.row.status == 1?  'el-icon-download':'el-icon-upload2'" type="text" :rowId="scope.row.id.toString()" @emit="onStatusChange" ></disable>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="grid-pager" @current-change="handleCurrentChange" v-if="resp.total>0"
          :current-page="params.page.page" next-text="下一页"
          :page-size="  params.page.pageSize" :total="resp.total" layout=" prev, pager, next,total,jumper">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {getBookList,updateBookStatus,getAllSubCategoryList} from "../../api/book";
  import {getDownloadFileRequest } from "../../api/index";

  import {fmDate} from "../../utils";
  import Disable from "@/components/Disable";

  export default {
    name:'book-list',
    components:{Disable},
    data(){
      return{
        headerTabName:'BookList',
        params: {
          key: null,
          categoryIdList:null,
          statusList:null,
          isDraft:0,
          page: {page: 1, pageSize: 10},
          sort: {order: null, sort: null}
        },
        resp:{
          bookList:[],
          total:0,
        },
        categoryFilters:[],
      }
    },
    methods:{
      onTabClick(tab){
        if(tab.name == 'DraftList'){
          this.$router.push({ name:'DraftList'});
        }
      },
      formatDate(date){
        return fmDate(date,"yyyy-MM-dd")
      },
      handleCurrentChange(val){
        this.params.page.page = val;
        this.loadData();
      },
      onSearch(){
        console.log("------->",this.params)
        this.params.page.page = 1;
        this.loadData();
      },
      filterChange(filters) {
        // console.log('filters',filters)
        if(filters.status && filters.status.length > 0) this.params.statusList = filters.status;
        else if(filters.status && filters.status.length == 0) this.params.statusList =null
        if(filters.categoryId && filters.categoryId.length > 0) this.params.categoryIdList = filters.categoryId;
        else if(filters.categoryId && filters.categoryId.length == 0) this.params.categoryIdList = null
        this.onSearch();
      },
      handleFilter(value, row, column) {
        const filteredValue = column['filteredValue'];
        const columnKey = column['columnKey'];
        let result = filteredValue.filter(t => t == row[columnKey])
        return result && result.length > 0;
      },
      downLoadImg(url) {
        let resut = url.split('/')
        let fileKey = resut[3]+'/'+resut[4]+'/'+resut[5]
        let href = getDownloadFileRequest() +'?fileKey='+fileKey+"&fileName="+Date.now()+".jpg";
        var link = document.createElement('a');
        link.href = href
        document.body.appendChild(link)
        link.click();
        window.URL.revokeObjectURL(link.href);
      },
      onExport(){
        //导出订单
      },
      onStatusChange(id,name){
        let data = {id: id }
        if(name == "上架") data.status = 1;
        else data.status = 0;
        this.handleStatus(data);
      },
      async handleStatus(data){
        let resp = await updateBookStatus(data);
        if(this.qUtil.validResp(resp)){
          this.loadData();
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
      async loadData(){
        let resp = await getBookList(this.params);
        // console.log('[111]',resp)
        if(this.qUtil.validResp(resp)){
          this.resp.bookList = resp.data.dataList;
          this.resp.total = resp.data.total;
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
      async loadCategory(){
        this.categoryFilters = []
        let resp = await getAllSubCategoryList();
        if(this.qUtil.validResp(resp)){
          let categoryList = resp.data.dataList;
          if(categoryList != null && categoryList.length>0){
            let filterCategory = []
            categoryList.map(m=>{
              if(filterCategory.filter(c=>c.value == m.id).length == 0) filterCategory.push({text:m.name,value:m.id});
            })
            this.categoryFilters = filterCategory;
          }
        }else this.$message({ message: resp.msg, type: 'warning' });
      }
    },
    mounted(){
      this.loadCategory();
      this.loadData();
    }
  }

</script>
<style scoped>
  .book-cover{
    width:52px;
    height:76px;
    padding:1px;
    border:1px solid #f2f2f2;
  }
  .book-big-qrcode{
    margin:0;
    padding:10px;
  }
  .book-big-qrcode img{
    width:124px;
    height:124px;
  }
  .book-qrcode{
    width:62px;
    height:62px;
  }
  .book-big-poster{
    margin:0;
    padding:10px;
  }
  .book-big-poster img{
    width:190px;
    height:260px;
  }
  .book-poster{
    width:52px;
    height:76px;
    padding:1px;
    border:1px solid #f2f2f2;
  }
  .book-tit,.book-info{
    margin:0;
    padding: 0;
    line-height: normal;
    font-size:14px;
  }
  .book-tit{
    color:#2C2B2A;
    font-weight:bolder;
    padding-bottom:7px;
  }
  .book-info{
    color:#8D8D8D;
    padding-bottom:15px;
  }
  .book-info span{
    display: inline-block;
    margin-right:10px;
  }
</style>
